<template>
  <div class="header">
    <el-menu 
      :default-active="activeIndex" 
      class="el-menu-demo" 
      mode="horizontal" 
      router
      background-color="#34495e"
      text-color="#fff"
      active-text-color="#3498db">
      
      <div class="logo" @click="goToHome">
        <span>PhotoPro</span>
      </div>
      
      <el-menu-item index="/">首页</el-menu-item>
      
      <el-submenu index="2">
        <template slot="title">摄影作品</template>
        <el-menu-item index="/?type=1">手机摄影</el-menu-item>
        <el-menu-item index="/?type=2">相机摄影</el-menu-item>
      </el-submenu>
      
      <div class="user-section" v-if="isLogin">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            <img :src="avatar || defaultAvatar" class="avatar" />
            <span>{{ nickname || username }}</span>
            <i class="el-icon-arrow-down"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="profile"><i class="el-icon-user"></i> 个人中心</el-dropdown-item>
            <el-dropdown-item command="logout"><i class="el-icon-switch-button"></i> 退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="user-section" v-else>
        <el-dropdown trigger="click">
          <span class="el-dropdown-link login-link">
            <i class="el-icon-user"></i> 登录/注册
            <i class="el-icon-arrow-down"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="$router.push('/login?tab=contestant')">
              <i class="el-icon-user"></i> 参赛者登录
            </el-dropdown-item>
            <el-dropdown-item @click.native="$router.push('/login?tab=admin')">
              <i class="el-icon-s-tools"></i> 管理员登录
            </el-dropdown-item>
            <el-dropdown-item @click.native="$router.push('/register')">
              <i class="el-icon-plus"></i> 注册账号
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'Header',
  data() {
    return {
      activeIndex: this.getActiveIndex(),
      defaultAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  },
  computed: {
    ...mapGetters(['isLogin', 'isAdmin', 'nickname', 'username', 'avatar'])
  },
  watch: {
    $route(to) {
      this.activeIndex = this.getActiveIndex()
    }
  },
  methods: {
    ...mapActions(['logout']),
    getActiveIndex() {
      const path = this.$route.path
      // Handle home page with query parameters
      if (path === '/' || path === '/home') {
        const type = this.$route.query.type
        return type ? `/?type=${type}` : '/'
      }
      // Otherwise return the path
      return path
    },
    goToHome() {
      this.$router.push('/')
    },
    handleCommand(command) {
      if (command === 'profile') {
        this.$router.push('/user/profile')
      } else if (command === 'logout') {
        this.logout()
        this.$message.success('退出登录成功')
        this.$router.push('/')
      }
    }
  }
}
</script>

<style scoped>
.header {
  width: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.el-menu--horizontal {
  display: flex;
  align-items: center;
  height: 60px;
}

.logo {
  margin: 0 20px;
  font-size: 24px;
  font-weight: 700;
  color: #3498db;
  letter-spacing: 1px;
}

.auth-buttons {
  margin-left: auto;
  margin-right: 20px;
  display: flex;
  align-items: center;
}

.auth-buttons .el-button {
  margin-left: 10px;
  color: white;
}

.auth-buttons .el-button--primary {
  background-color: #3498db;
  border-color: #3498db;
}

.el-menu-item {
  font-size: 15px;
  transition: all 0.3s;
}

.el-menu-item:hover {
  transform: translateY(-2px);
}

.user-section {
  margin-left: auto;
  margin-right: 20px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}

.login-link {
  color: #fff;
  display: flex;
  align-items: center;
}

/* Override element-ui styles */
:deep(.el-submenu__title:hover), :deep(.el-menu-item:hover) {
  background-color: #2c3e50 !important;
}

:deep(.el-submenu__title), :deep(.el-menu-item) {
  height: 60px;
  line-height: 60px;
}
</style> 